
<style>
    #Container {
        width: 940px;
        height: 520px;
        background-color: black;
        margin: auto;
        text-align: center;
        position: relative;
        z-index: 99;
    }

    #floatDiv {
        width: 932px;
        height: 513px;
        /*background-color: #24a83a;*/
        position: relative;
        left: 4px;
        z-index: 999;
        opacity: 0;
    }

    .controllerBox {
        position: relative;
        width: 908px;
        height: 43px;
        text-align: center;
        margin-left: 12px;
        margin-top: -3px;
        transition: top 0.5s;
        top: -500px;
        z-index: 9999;
    }

    .setController {
        height: 100px;
        width: 200px;
        background-color: black;
        position: relative;
        top: -750px;
        left: 700px;
        z-index: 9999;
        color: white;
        opacity: 0.6;
    }

    .video-author {
        height: 60px;
        width: 100px;
        position: relative;
        top: -1100px;
        left: 820px;
        z-index: 9999;
        color: white;
        opacity: 0.4;
        line-height: 60px;
        border: white solid 1px;

    }

    #float-contrBox {
        height: 50px;
        position: relative;
        z-index: 99999;
        top: -540px;
        background-color: white;

    }

    .vPlay {
        width: 932px;
        height: 513px;
        background-color: black;
        margin: auto;
        text-align: center;
        position: relative;
        top: -513px;
    }

    #video1 {
        width: 912px;
        height: 513px;
    }

    .preDiv {
        height: 5px;
        width: 908px;
        float: left;
    }

    #pro {
        width: 908px;
        height: 5px;
        float: left;
    }


    .controllerButton {
        height: 40px;
        width: 908px;
    }

    .left-controls {
        width: 708px;
        height: 40px;
        float: left;
    }

    .pB {
        width: 20px;
        height: 20px;
        background-size: cover;
        background-repeat: no-repeat;
        margin-top: 10px;
        margin-left: 20px;
        float: left;
    }

    #playBut {
        background-image: url("/static/img/icon/play.svg");
    }

    #pauseBut {
        background-image: url("/static/img/icon/pause.svg");
    }

    #nextVideo {
        background-image: url("/static/img/icon/nextVideo.svg");
    }

    #volumeBut {
        width: 0px;
        height: 20px;
        float: left;
    }

    #volumeIcon {
        width: 20px;
        height: 20px;
        background-image: url("/static/img/icon/volume.svg");
        background-size: cover;
        background-repeat: no-repeat;
        float: left;
    }

    #volumeIcon1 {
        width: 20px;
        height: 20px;
        background-image: url("/static/img/icon/mute.svg");
        background-size: cover;
        background-repeat: no-repeat;
        float: left;
    }

    #volumeRange {
        margin-top: 10px;
        float: left;
    }

    .right-controls {
        width: 200px;
        height: 40px;
        float: left;
    }

    #fullScreen {
        background-image: url("/static/img/icon/fullScreen.svg");
        margin-right: 20px;
        float: right;
    }

    #setting {
        background-image: url("/static/img/icon/setting.svg");
        margin-right: 20px;
        float: right;
    }


    #ran {
        background-size: 98% 3px;
        margin: auto;
        width: 50px;
        background: linear-gradient(to right, #ccc 0%, #ccc 100%);
        outline: none;
        -webkit-appearance: none; /*清除系统默认样式*/
        height: 3px; /*横条的高度*/
        display: none;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),
        0 3px 5px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        -webkit-appearance: none;
        border: 0;
    }

    /*    时间模块*/
    #time-model {
        width: 140px;
        float: left;
        height: 20px;
        margin-top: 10px;
        margin-left: 30px;
        color: white;
        font-size: smaller;
    }

    /*   速度模块*/
    #sel {
        width: 100px;
        height: 44px;
        font-size: medium;
    }

    #sel-quality {
        width: 100px;
        height: 44px;
        font-size: medium;
    }

    #speedDiv-name {
        float: left;
        width: 100px
    }

    #speedDiv-sel {
        float: right;
        width: 100px

    }

</style>
<script>
    let flag = 0;

    function showVolumeRange() {
        let r = document.getElementById("ran");
        let v = document.getElementById("volumeBut");
        v.style["width"] = "70px";
        r.style['display'] = 'block';
    }

    function closeVolumeRange() {
        let r = document.getElementById("ran");
        let v = document.getElementById("volumeBut");
        v.style["width"] = "0px";
        r.style['display'] = 'none';

    }

    function showControllerBox() {
        let contr = document.getElementById("contrBox");
        contr.style['top'] = '-550px';

    }

    function closeControllerBox() {
        let contr = document.getElementById("contrBox");
        contr.style['top'] = '-500px';

    }

    function showSetDiv() {
        let setIcon = document.getElementById("setting");
        let set = document.getElementById("setContr");
        setIcon.style['transition'] = "2s"
        setIcon.style['transform'] = "rotate(180deg)"
        set.style["display"] = 'block';
    }

    function closeSetDiv() {
        let setIcon = document.getElementById("setting");
        let set = document.getElementById("setContr");
        setIcon.style['transition'] = "2s"
        setIcon.style['transform'] = "rotate(-180deg)"
        set.style["display"] = "none";
    }
</script>
<div id="Container">
    <div id="floatDiv" class="float-div" onmouseover="showControllerBox()" onclick="closeSetDiv()">

    </div>
    <div class="vPlay">
        <video id="video1" class="video" preload="auto" poster="/static/img/3adce96a508149c3ae07db83df38f931.png">
            <source src="/{{.videoPath}}">
        </video>
    </div>
    <div class="controllerBox" id="contrBox" onmouseleave="closeControllerBox()">
        <div class="preDiv">
            <progress value="0" max="0" id="pro"></progress>
        </div>

        <div class="controllerButton">
            <div class="left-controls" onclick="closeSetDiv()">
                <div id="playBut" class="pB" onclick="playVid()"></div>
                <div id="pauseBut" class="pB" style="display: none" onclick="pauseVid()"></div>
                <div id="nextVideo" class="pB" onclick="playVid()"></div>
                <div id="volumeBut" class="pB vBut" onmouseleave="closeVolumeRange()">
                    <div id="volumeIcon" onmouseover="showVolumeRange()" onclick="enableMute()" class="vIcon"></div>
                    <div id="volumeIcon1" onmouseover="showVolumeRange()" onclick="disableMute()"
                         style="display: none"></div>
                    <div id="volumeRange">
                        <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
                    </div>
                </div>
                <div id="time-model" class="pB">
                    <span id="timeShow">
                        <span id="curr-timeH"></span>:
                        <span id="curr-timeM"></span>:
                        <span id="curr-timeS"></span>
                    </span>/

                    <span id="totalTime">
                        <span id="time-h"></span>:
                        <span id="time-m"></span>:
                        <span id="time-s"></span>
                    </span>
                </div>
            </div>
            <div class="right-controls">
                <div id="fullScreen" class="pB" onclick="showFull()"></div>
                <div id="setting" class="pB" onclick="showSetDiv()"></div>
            </div>

        </div>
    </div>
    <div class="controllerBox" id="float-contrBox"></div>
    <div class="setController" id="setContr" style="display: none">
        <div id="speedDiv" style="width:200px;height: 50px;line-height: 50px ">
            <div id="speedDiv-name">播放速度</div>
            <div id="speedDiv-sel">
                <select id="sel" onchange="playSpeedSet()">
                    <option value="0.25">0.25</option>
                    <option value="0.50">0.50</option>
                    <option value="0.75">0.75</option>
                    <option value="1.0" selected="selected">正常</option>
                    <option value="1.25">1.25</option>
                    <option value="1.50">1.50</option>
                    <option value="1.75">1.75</option>
                    <option value="2.0">2</option>
                </select>
            </div>
        </div>
        <div style="width:200px;height: 50px;line-height: 50px ">
            <div style="float: left;width: 100px;">清晰度</div>
            <div style="float: right;width: 100px">
                <select id="sel-quality">
                    <option value="volvo">1080p</option>
                    <option value="volvo">720p</option>
                    <option value="volvo" selected="selected">420p</option>
                    <option value="volvo">360p</option>
                </select>
            </div>
        </div>
    </div>
    <div class="video-author" id="videoAuth">轩辕(杉杉)</div>

</div>
<script>
    var myvideo = document.getElementById("video1");
    var pro = document.getElementById("pro");
    var ran = document.getElementById("ran");
    let pause = document.getElementById("pauseBut")
    let play = document.getElementById("playBut");
    let noMute = document.getElementById("volumeIcon")
    let mute = document.getElementById("volumeIcon1")
    let volume = 0;
    let ranValue = 0;


    //关闭声音
    function enableMute() {
        noMute.style['display'] = 'none';
        volume = myvideo.volume;
        ranValue = volume * 100;
        ran.value = 0;
        mute.style['display'] = 'block';
        myvideo.muted = true;
    }

    //打开声音
    function disableMute() {
        myvideo.volume = volume;
        ran.value = ranValue;
        noMute.style['display'] = 'block';
        mute.style['display'] = 'none';
        myvideo.muted = false;
    }

    //播放视频
    function playVid() {
        myvideo.play();
        setInterval(pro1, 1000);
        play.style['display'] = 'none';
        pause.style['display'] = 'block';
    }

    //暂停视频
    function pauseVid() {
        myvideo.pause();
        play.style['display'] = 'block'
        pause.style['display'] = "none"
    }

    //全屏
    function showFull() {
        var ele = document.getElementById('video1');
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullScreen) {
            ele.webkitRequestFullScreen();
        }
    }

    //进度条展示
    function pro1() {
        pro.max = myvideo.duration;
        pro.value = myvideo.currentTime;
    }


    //拖动range进行调音量大小
    function setvalue() {
        myvideo.volume = ran.value / 100;
        myvideo.muted = false;
    }

    myvideo.addEventListener("play", function () {
        let timeH = document.getElementById("time-h")
        let timeM = document.getElementById("time-m")
        let timeS = document.getElementById("time-s")
        let tTime = myvideo.duration;
        let h = Div(tTime, 3600)
        let m = Div((tTime - h * 3600), 60);
        let s = Div((tTime - 3600 * h - m * 60), 1);
        console.log(h + ":" + m + ":" + s)
        if (h < 10) {
            h = "0" + h;
        }
        if (m < 10) {
            m = "0" + m;

        }
        if (s < 10) {
            s = "0" + s;
        }
        timeH.innerText = h;
        timeM.innerText = m;
        timeS.innerText = s;

    })

    let H = 0;
    let M = 0;

    //使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
    myvideo.addEventListener("timeupdate", function () {
        let timeH = document.getElementById("curr-timeH");
        let timeM = document.getElementById("curr-timeM");
        let timeS = document.getElementById("curr-timeS");
        let timeDisplay;
        //当前视频播放时间
        let h = 0;
        let m = 0;
        let s = 0;
        //用秒数来显示当前播放进度
        timeDisplay = Math.floor(myvideo.currentTime);
        s = timeDisplay;
        m = Div(s, 60);
        h = Div(s, 3600)
        let se = s - m * 60 - h * 3600;
        if (se < 10) {
            se = "0" + se;
        }
        timeS.innerText = se;
        if (m < 10) {
            m = "0" + m;
        }
        timeM.innerText = m;

        if (h < 10) {
            h = "0" + h;
        }
        if (h == 0) {
            h = "00";
        }
        timeH.innerText = h;


    })


    //    tools
    //整除
    function Div(exp1, exp2) {
        var n1 = Math.round(exp1); //四舍五入  
        var n2 = Math.round(exp2); //四舍五入  

        var rslt = n1 / n2; //除  

        if (rslt >= 0) {
            rslt = Math.floor(rslt); //返回小于等于原rslt的最大整数。  
        } else {
            rslt = Math.ceil(rslt); //返回大于等于原rslt的最小整数。  
        }
        return rslt;
    }

    //    play speed set
    function playSpeedSet() {
        let sel = document.getElementById("sel")
        let rate = sel.options[sel.options.selectedIndex].value;

        myvideo.playbackRate = Number(rate);


    }

</script>

